<template>
  <basic-container :btnFlag=true>
    <div class="card-border"
         style="padding-bottom: 28px;">
      <card-header :header-data="headerData"></card-header>
      <div class="step-group"
           style="margin: 66px 20px 1px;">
        <!-- <el-steps :active="0"
                  v-if="havModifyOpinion">
          <el-step title="上报报告(退回修改)"
                   icon="el-icon-edit"></el-step>
          <el-step title="政府"
                   icon="el-icon-upload"></el-step>
          <el-step title="党委"
                   icon="el-icon-message-solid"></el-step>
          <el-step title="政府"
                   icon="el-icon-upload"></el-step>
          <el-step title="人大"
                   icon="el-icon-picture"></el-step>
        </el-steps> -->
        <el-steps :active="0"
                  v-if="havModifyOpinion">
          <el-step title="上报报告"
                   icon="el-icon-edit"></el-step>
          <el-step title="政府"
                   icon="el-icon-edit"
                   class="transform-deg_two"></el-step>
          <el-step title=""
                   icon="el-icon-edit"
                   class="transform-deg_line_two"></el-step>
          <el-step title="党委"
                   icon="el-icon-upload"
                   class="beian_two"></el-step>
          <el-step title="人大"
                   icon="el-icon-upload"
                   style="margin-top: 35px;margin-left: -250px;"></el-step>

        </el-steps>
        <el-steps :active="0"
                  v-else>
          <el-step title="上报报告(退回修改)"
                   icon="el-icon-edit"></el-step>
          <el-step title="政府"
                   icon="el-icon-upload"></el-step>
          <el-step title="人大"
                   icon="el-icon-picture"></el-step>
          <el-step title="抄送上级发改"
                   icon="el-icon-upload"></el-step>
        </el-steps>
      </div>
      <div style="margin: 20px 10px;">
        <el-form label-width="170px"
                 :model="editForm"
                 style="padding-right: 30px;"
                 :rules="editFormRules"
                 ref="editForm">
          <el-row>
            <el-col :span="22"
                    style="margin-top: 20px">
              <el-form-item class="form-item"
                            label="相关报告 :"
                            :required="true">
                <el-upload class="upload-demo"
                           ref="upload"
                           :limit="1"
                           :on-exceed="tipFileOne"
                           action="string"
                           :http-request="submitUploadtextMixin"
                           :on-preview="handlePreviewtextMixin"
                           :on-remove="handleRemovetextMixin"
                           :file-list="fileListtextMixin"
                           :auto-upload="true"
                           :on-change="fileChangetextMixin">
                  <el-button slot="trigger"
                             size="small"
                             type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item class="form-item"
                            label="相关附件:">
                <el-upload class="upload-demo"
                           ref="uploadrelated"
                           action="string"
                           :http-request="submitUploadMixin"
                           :on-preview="handlePreviewMixin"
                           :on-remove="handleRemoveMixin"
                           :file-list="fileListMixin"
                           :auto-upload="true"
                           :on-change="fileChangeMixin">
                  <el-button slot="trigger"
                             size="small"
                             type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="havModifyOpinion">
            <el-col :span="22">
              <el-form-item class="form-item"
                            label="修订调整建议:">
                <el-input type="textarea"
                          :rows="2"
                          placeholder="请输入修订调整建议"
                          v-model="modifyOpinion">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="havModifyOpinion">
            <el-col :span="22">
              <el-form-item class="form-item"
                            label="相关修订调整建议附件:">
                <el-upload class="uploadFile"
                           action="string"
                           :limit="1"
                           :on-exceed="tipFileOne"
                           :http-request="basisSubmitUploadMixin"
                           :on-change="basisFileChangeMixin"
                           :on-preview="basishandlePreviewMixin"
                           :on-remove="basishandleRemoveMixin"
                           :auto-upload="true"
                           :file-list="basisFileListMixin">
                  <el-button slot="trigger"
                             size="small"
                             type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="text-align: center; margin-top: 40px;margin-bottom: 40px;">
        <el-button type="warning"
                   @click="submitEdit()">确定</el-button>
        <el-button type="info"
                   @click.stop="goBack()">关闭</el-button>
      </div>
      <el-collapse v-model="activeNames"
                   style="margin-top:2rem;">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">中期评估报告信息</div>
            </div>
          </template>
          <div class="searchDetail">
            <report-detail @putData="putData"
                           :reportId="$route.query.reportId"></report-detail>
          </div>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">报告流程处理历史信息</div>
            </div>
          </template>
          <avue-crud :data="historyData"
                     :option="option"
                     :page="page"
                     :table-loading="tableLoading"
                     @on-load="getToDoList"
                     class="avuecrud">
          </avue-crud>
        </el-collapse-item>
      </el-collapse>
      <!-- <el-collapse v-model="activeNamessd" >
        <el-collapse-item name="1">
            <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title"  v-if="$route.query.reportState=='4'">政府审定意见</div>
              <div class="head-title collapse-title"  v-if="$route.query.reportState=='8'">人大审议意见</div>
            </div>
          </template>
    <div class="searchDetail">
      <table class="bs-table">
              <tr class="bs-table_row">
                <th class="bs-table_th" style="width: 200px;">{{$route.query.reportState=='4'?'审定结果' :'审议结果'}}</th>
                <td colspan="3" class="bs-table_td">不同意</td>
              </tr>
              <tr class="bs-table_row">
                <th class="bs-table_th" style="width: 200px;">意见或理由</th>
                <td
                  colspan="3"
                  class="bs-table_td"
                > {{$route.query.reportState=='8'?$route.query.considerOpinion:opinion}}</td>
              </tr>
            </table>
          </div>
        </el-collapse-item>
      </el-collapse> -->

    </div>
  </basic-container>
</template>

<script>
import { getReportDetail, reportEdit, getReportHistory } from "@/api/pim/pim";
import { getfileinfopage } from "@/api/system"
import { getNotNull } from '@/views/util'
import textfile from "@/mixins/textfile";
import relatedfile from "@/mixins/relatedfile";
import reportDetail from "@/components/pim/report/detail"
import basisfile from "@/mixins/basisfile";

export default {
  name: "reportEdit",
  mixins: [relatedfile, textfile, basisfile],
  created () {
    this.getReportHistory();
    this.opinion = this.$route.query.opinion;
  },
  components: {
    reportDetail
  },
  data () {
    return {
      modifyOpinion: '',
      historyData: [],
      option: {
        page: false,
        addBtn: false,
        editBtn: false,
        addRowBtn: false,
        indexLabel: "序号",
        index: true,
        indexWidth:70,
        cellBtn: false,
        delBtn: false,
        columnBtn: false,
        refreshBtn: false,
        filterBtn: false,
        searchBtn: false,
        menuWidth: 100,
        menu: false,
        keyId: "id",
        column: [
          {
            label: "环节名称",
            prop: "taskName",
            cell: true,
            width: 120,
          },
          {
            label: "办理部门",
            prop: "assigneeNickname",
            cell: true,
            width: 180,
          },
          {
            label: "相关意见",
            prop: "opinion",
            cell: true,
          },
        ]
      },
      havModifyOpinion: '',
      headerData: {
        title: '修改'
      },
      activeNames: ['1', '2'],
      editForm: {
        fileIds: [],
        material_fileIds: [],
      },
      projectForm: {  //用于存放相关报告和相关附件
        textId: null,
      },
      opinion: '',
      reportData: ''

    }
  },
  methods: {
    getReportHistory () {
      getReportHistory(Object.assign({
        reportId: this.$route.query.reportId,
      })).then(response => {
        this.historyData = response.data.data;
      })
    },
    putData (data) {
      this.havModifyOpinion = data.havModifyOpinion;
      this.reportData = data
    },
    reportTypeTransform (reportType, year) {
      switch (reportType) {
        case '2':
          return '中期评估报告';
          break;
        case '3':
          return '期末总结报告';
          break;
        case '1':
          return year + '年度监测分析报告';
          break;
      }
    },
    goBack () {
      this.$router.go(-1);
    },
    submitEdit () {
      if (this.projectForm.textId == null) {
        this.$notify({
          title: "提醒",
          type: "warning",
          message: "请上传相关报告",
          duration: 2000
        });
        return;
      }
      this.$confirm("确定提交修改么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.editForm.fileIds.push(this.projectForm.textId);
        //将多个相关材料的附件id拼成逗号隔开的字符串放在 this.projectForm.fileId 中
        var arr = [];
        for (var item in this.fileListMixin) {
          arr.push(this.fileListMixin[item].url);
        }
        let brr = [];
        if (this.basisFileListMixin) {
          for (var item in this.basisFileListMixin) {
            brr.push(this.basisFileListMixin[item].url);
          }
          this.reportData.modifyOpinion_fileIds = brr
        }
        this.editForm.material_fileIds = arr;
        if (this.modifyOpinion.trim()) {
          this.reportData.modifyOpinion = this.modifyOpinion
        }
        if (this.reportData.havModifyOpinion) {
          this.editForm.modifyOpinion_fileIds = this.reportData.modifyOpinion_fileIds;
          this.editForm.modifyOpinion = this.reportData.modifyOpinion
        }

        reportEdit(this.$route.query.reportId, this.editForm).then(response => {
          if (response.data.code == '0') {
            this.$message({
              message: '提交成功！',
              type: 'success'
            });
            this.$router.go(-1);
          }
        })
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.transform-deg_two {
  /deep/.el-step__line {
    transform: rotate(-11deg);
    margin-top: -17px;
  }
}
.transform-deg_line_two {
  margin-left: -248px;

  /deep/.el-step__line {
    transform: rotate(11deg);
    margin-top: 17px;
  }
}
.beian_two {
  margin-top: -62px;
  margin-left: 8px;

  /deep/.el-step__line {
    display: none;
  }
}
.step-group {
  margin: 5rem 0;
  margin-bottom: 1px;
}

.form-item {
  color: black;
  font-size: 16px;
  font-weight: 600;
}
</style>
